<template>
  <div class="campusCircleWrap">
    <div class="content">
      <div
        class="postWrap"
        @click="toPostDetail(item)"
        v-for="(item, index) in postList"
        v-if="+item.display===1"
        :key="index"
      >
        <div class="postHeader">
          <div class="postHeader_img">
            <img
              v-if="item.user[0].headPic"
              :src="item.user[0].headPic.content"
              alt=""
              ref="headPic"
              :style="headPicHeight"
            />
            <img
              v-else
              src="static/images/headPic.png"
              alt=""
              ref="headPic"
              :style="headPicHeight"
            />
          </div>
          <span v-if="item.user[0]">{{ item.user[0].username }}</span>
        </div>
        <div class="postWord">
          <span class="postWord_span">{{ item.title }}</span>
          <p class="postWord_p">
            {{ item.content }}
          </p>
        </div>
        <div class="postImg">
          <img
            :src="pic.content"
            alt=""
            v-for="(pic, index) in item.pictures"
            :key="index"
          />
        </div>
        <div class="postFooter">
          <div class="read">
            <van-icon class="van-icon" name="browsing-history-o" />
            <span>{{ item.readNum }}</span>
          </div>
          <div class="comment">
            <van-icon name="comment-o" />
            <span>{{ item.commentList.length }}</span>
          </div>
          <div class="like" @click.stop="lickChange(item)">
            <van-icon
              v-if="item.likeList.indexOf(user[0]._id) === -1"
              name="like-o"
            />
            <van-icon v-else name="like" />
            <span>{{ item.likeList.length }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUser, setLikeList, getAllPost } from '@/views/api/api.js'
// import { Toast, Dialog } from 'vant'
export default {
  components: {},
  data () {
    return {
      activeKey: 0,
      isShowPopup: false,
      modulename: '',
      applyReason: '',
      user: '',
      sidebarList: [],
      postList: [],
      headPicHeight: '',
      isAdd: false // 是否点赞  不是取消赞
    }
  },
  computed: {},
  created () {
    this.init()
  },
  mounted () {},
  methods: {
    init () {
      // 获取用户信息
      this.user = JSON.parse(sessionStorage.getItem('user'))
      // 初始化，从数据库中获取所有的帖子
      getAllPost().then((res) => {
        if (res.data.code) {
        } else {
          this.postList = res.data.Info
          // 数组反过来，让时间新的在前面显示
          this.postList = this.postList.reverse()
          // this.slidebarUser = []
          // for (let i = 0; i < this.postList.length; i++) {
          //   getUser(this.postList[i]._id).then(res => {
          //     if (!res.data.code) {
          //     } else {
          //     }
          //   })
          // }
        }
      })
    },
    lickChange (item) {
      // 判断当前用户是否点赞过，即是否在likeList中 在则从likeList删除，不在则push进去
      if (item.likeList.indexOf(this.user[0]._id) === -1) {
        this.isAdd = true
      } else {
        this.isAdd = false
      }
      // 将likeList写入数据库
      let params = {
        isAdd: this.isAdd,
        userID: this.user[0]._id,
        id: item._id
      }
      setLikeList(params).then((res) => {
        if (res.data.code) {
          // Toast.fail(res.data.msg)
        } else {
          item.likeList = res.data.Info[0].likeList
          // 轮询 WebSocket 2
          // var ws = new WebSocket('ws://localhost:8080')
          // ws.onopen = function () {
          //   ws.send('the request from client')
          // }
          // ws.onmessage = function (e) {
          //   console.log('from server: ' + e.data)
          // }
          // 修改成功
        }
      })
    },
    toPostDetail (item) {
      this.$router.push({
        name: 'postDetail',
        query: { postID: item._id }
      })
    }
  }
}
</script>
<style scoped>
.campusCircleWrap {
  display: flex;
  justify-content: flex-start;
}
.van-sidebar {
  overflow-y: auto;
}
.van-sidebar::-webkit-scrollbar {
  width: 0;
}
.content {
  background-color: #f7f8fa;
  overflow-y: auto;
  width: 100%;
}
.postHeader {
  text-align: left;
  display: flex;
  align-items: center;
}
.postHeader_img {
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 0.08rem;
}
.postHeader_img > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.postHeader > span {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.postWrap {
  padding: 5px 16px;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 10px 0;
}
.postImg {
  display: flex;
  flex-wrap: wrap;
}
.postImg .van-image {
  margin: 0.05rem;
}
.postImg img {
  margin: 0.05rem;
}
.postImg img {
  width: calc((100% - 40px) / 3);
}
.postWord {
  text-align: left;
  margin: 5px 0;
}
.postFooter {
  text-align: left;
  color: #9d9d9d;
  display: flex;
  justify-content: space-around;
}
.postFooter .van-icon {
  vertical-align: middle;
}
.postFooter > div {
  display: flex;
  align-items: center;
}
.postFooter > div > span {
  margin-left: 3px;
}
.postWord_span {
  font-weight: 700;
  font-size: 0.12rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.postWord_p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.postFooter .van-icon-like::before {
  color: #ffb6c1;
}
</style>
